Brand Evolution - DO NOT MERGE #692
Conversation
georgewrmarshall
changed the title
georgewrmarshall
force-pushed
the
brand-evolution
branch
from
0abf3d2 to
5303fcc
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
MIGRATION.md
Outdated
| - grey000 added | ||
| - grey025 added | ||
| - grey050 added | ||
| - grey030 removed | ||
| - grey040 removed | ||
| - grey750 removed | ||
| - grey1000 added |
There was a problem hiding this comment.
In the final migration documentation, it would be beneficial to include specific code changes. Added
JS
Added
brandColor.grey000
brandColor.grey025
Removed
brandColor.grey030
CSS
Added
--brand-colors-grey-grey000
--brand-colors-grey-grey025
Removed
--brand-colors-grey-grey030
This detail will aid engineers who are searching for removed tokens in the codebase.
There was a problem hiding this comment.
Yep agree - Migration doc needs some work
automation-scripts/brandColor.js
Outdated
| inputFilePath, | ||
| typesOutputFilePath, | ||
| colorsOutputFilePath, | ||
| ); |
There was a problem hiding this comment.
Not used in build step. Automates 90% of json conversion to JS but still requires manual changes
automation-scripts/themeColors.js
Outdated
| // Dark Theme Brand Evolution | ||
| const inputFilePathDark = '../src/figma/darkTheme.json'; | ||
| const colorsOutputFilePathDark = '../src/js/themes/darkTheme/colors.ts'; | ||
| generateThemeFiles(inputFilePathDark, colorsOutputFilePathDark); |
There was a problem hiding this comment.
Not used in build step. Automates 90% of json conversion to JS but still requires manual changes
docs/BrandColors.stories.tsx
Outdated
There was a problem hiding this comment.
Need to fix JS mapping so that brandColor.white and brandColor.black show up
http://localhost:6006/?path=/story/colors-brand-colors--js
There was a problem hiding this comment.
Fixed in this PR and also fixed to be checked in test as well
georgewrmarshall
added
the
DO NOT MERGE
| @@ -15,7 +15,7 @@ interface ColorSwatchGroupProps { | |||
| /** Hex code value of the theme (light or dark mode) this is used to help determine the text color of each swatch when opacity is involved | |||
| * Default is light theme #ffffff | |||
| */ | |||
| theme?: string | undefined; | |||
| theme?: string; | |||
There was a problem hiding this comment.
revert change
georgewrmarshall
force-pushed
the
brand-evolution
branch
from
a89d271 to
8862133
Compare
georgewrmarshall
force-pushed
the
brand-evolution
branch
from
b82eeb8 to
3acaa0f
Compare
garrettbear
force-pushed
the
brand-evolution
branch
from
8a8d6f6 to
686a77f
Compare
…o test in other projects
|
This repository is no longer accepting PRs directly. Please reopen this PR in the Metamask Design System repository. |
Description
This PR is created as a draft for testing updates related to the brand evolution across MetaMask Mobile, Extension, and Portfolio interfaces. It includes the implementation of new token names and the integration of brand evolution colors. This testing branch will not merge into the main branch but will serve as a key part of the development process, ensuring that all new branding elements are correctly implemented and visually consistent across all platforms before final deployment.
Related issues
No specific issues are linked to this PR as it serves as a preparatory and testing stage for the upcoming brand updates.
Manual testing steps
Screenshots/Recordings
Before
before720.mov
After
after720.mov